<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>财务管理系统</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        [v-cloak] { display: none; }
    </style>
</head>
<body class="bg-gray-50">
    <div id="app" v-cloak>
        <!-- 整体布局容器 -->
        <div class="flex h-screen">
            <!-- 左侧导航栏 -->
            <div class="w-64 bg-white shadow-lg border-r border-gray-200">
                <!-- Logo区域 -->
                <div class="h-16 flex items-center justify-center border-b border-gray-200">
                    <div class="flex items-center space-x-2">
                        <div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
                            <i class="fas fa-calculator text-white text-sm"></i>
                        </div>
                        <span class="text-lg font-semibold text-gray-800">精算家</span>
                    </div>
                </div>
                
                <!-- 导航菜单 -->
                <nav class="mt-4 px-4">
                    <ul class="space-y-1">
                        <li v-for="item in menuItems" :key="item.name">
                            <a href="#" 
                               :class="[
                                   'flex items-center px-3 py-2.5 text-sm font-medium rounded-lg transition-colors duration-200',
                                   item.active 
                                       ? 'bg-blue-50 text-blue-700 border-r-2 border-blue-700' 
                                       : 'text-gray-700 hover:bg-gray-50 hover:text-gray-900'
                               ]">
                                <i :class="[item.icon, 'mr-3 text-base']"></i>
                                {{ item.name }}
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>

            <!-- 右侧主内容区 -->
            <div class="flex-1 flex flex-col">
                <!-- 顶部导航栏 -->
                <header class="h-16 bg-white border-b border-gray-200 flex items-center justify-between px-6">
                    <!-- 左侧：公司选择 -->
                    <div class="flex items-center space-x-4">
                        <div class="relative">
                            <select class="appearance-none bg-white border border-gray-300 rounded-lg px-4 py-2 pr-8 text-sm font-medium text-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                <option>北京神州源科技有限公司</option>
                            </select>
                            <i class="fas fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-xs"></i>
                        </div>
                    </div>
                    
                    <!-- 右侧：操作按钮 -->
                    <div class="flex items-center space-x-3">
                        <button class="flex items-center px-4 py-2 text-sm font-medium text-blue-600 bg-blue-50 rounded-lg hover:bg-blue-100 transition-colors">
                            <i class="fas fa-desktop mr-2"></i>
                            返回工作台
                        </button>
                        <button class="p-2 text-gray-400 hover:text-gray-600 rounded-lg hover:bg-gray-50">
                            <i class="fas fa-home"></i>
                        </button>
                        <button class="p-2 text-gray-400 hover:text-gray-600 rounded-lg hover:bg-gray-50">
                            <i class="fas fa-user-circle text-lg"></i>
                        </button>
                    </div>
                </header>

                <!-- 主内容区 -->
                <main class="flex-1 p-6 overflow-auto">
                    <!-- 页面标题 -->
                    <div class="mb-6">
                        <div class="flex items-center text-sm text-gray-500 mb-2">
                            <i class="fas fa-home mr-1"></i>
                            <span>主页</span>
                        </div>
                    </div>

                    <!-- 统计卡片区域 -->
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
                        <div v-for="card in statsCards" :key="card.title" 
                             class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shadow-md transition-shadow">
                            <div class="flex items-center justify-between mb-4">
                                <div :class="[
                                    'w-12 h-12 rounded-lg flex items-center justify-center',
                                    card.bgColor
                                ]">
                                    <i :class="[card.icon, 'text-xl', card.iconColor]"></i>
                                </div>
                            </div>
                            <h3 class="text-lg font-semibold text-gray-900 mb-1">{{ card.title }}</h3>
                            <p class="text-sm text-gray-500">{{ card.description }}</p>
                        </div>
                    </div>

                    <!-- 底部操作区域 -->
                    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                        <!-- 新增凭证区域 -->
                        <div class="lg:col-span-1">
                            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
                                <div class="text-center">
                                    <div class="w-24 h-24 mx-auto mb-4 border-2 border-dashed border-blue-300 rounded-lg flex items-center justify-center bg-blue-50">
                                        <i class="fas fa-plus text-3xl text-blue-500"></i>
                                    </div>
                                    <h3 class="text-lg font-semibold text-gray-900 mb-2">新增凭证</h3>
                                    <p class="text-sm text-gray-500 mb-4">1月份未结账</p>
                                    <button class="w-full bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 transition-colors font-medium">
                                        创建凭证
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- 最近凭证区域 -->
                        <div class="lg:col-span-2">
                            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
                                <div class="flex items-center justify-between mb-6">
                                    <h3 class="text-lg font-semibold text-gray-900">最近凭证</h3>
                                    <a href="#" class="text-blue-600 hover:text-blue-700 text-sm font-medium">
                                        查看更多
                                        <i class="fas fa-arrow-right ml-1"></i>
                                    </a>
                                </div>
                                
                                <!-- 凭证列表 -->
                                <div class="space-y-4">
                                    <div v-for="voucher in recentVouchers" :key="voucher.id"
                                         class="flex items-center justify-between p-4 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
                                        <div class="flex items-center space-x-4">
                                            <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
                                                <i class="fas fa-file-invoice text-blue-600"></i>
                                            </div>
                                            <div>
                                                <div class="font-medium text-gray-900">{{ voucher.title }}</div>
                                                <div class="text-sm text-gray-500">{{ voucher.date }}</div>
                                            </div>
                                        </div>
                                        <div class="text-right">
                                            <div class="font-medium text-gray-900">{{ voucher.amount }}</div>
                                            <div class="text-sm text-gray-500">{{ voucher.type }}</div>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- 空状态提示 -->
                                <div v-if="recentVouchers.length === 0" class="text-center py-8">
                                    <i class="fas fa-inbox text-4xl text-gray-300 mb-4"></i>
                                    <p class="text-gray-500">暂无最近凭证</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </main>
            </div>
        </div>
    </div>

    <script>
        const { createApp } = Vue;

        createApp({
            data() {
                return {
                    menuItems: [
                        { name: '主页', icon: 'fas fa-home', active: true },
                        { name: '记账凭证', icon: 'fas fa-file-invoice', active: false },
                        { name: '账簿', icon: 'fas fa-book', active: false },
                        { name: '管理账簿', icon: 'fas fa-cogs', active: false },
                        { name: '结账', icon: 'fas fa-calculator', active: false },
                        { name: '固定资产', icon: 'fas fa-building', active: false },
                        { name: '报表中心', icon: 'fas fa-chart-bar', active: false },
                        { name: '基础设置', icon: 'fas fa-sliders-h', active: false },
                        { name: '报税', icon: 'fas fa-file-alt', active: false },
                        { name: '发票', icon: 'fas fa-receipt', active: false }
                    ],
                    statsCards: [
                        {
                            title: '余额表',
                            description: '本期借方余额',
                            icon: 'fas fa-balance-scale',
                            bgColor: 'bg-blue-100',
                            iconColor: 'text-blue-600'
                        },
                        {
                            title: '资产负债表',
                            description: '资产负债',
                            icon: 'fas fa-chart-pie',
                            bgColor: 'bg-orange-100',
                            iconColor: 'text-orange-600'
                        },
                        {
                            title: '利润表',
                            description: '净利润',
                            icon: 'fas fa-comments-dollar',
                            bgColor: 'bg-blue-100',
                            iconColor: 'text-blue-600'
                        },
                        {
                            title: '现金流量表',
                            description: '期末现金余额',
                            icon: 'fas fa-money-bill-wave',
                            bgColor: 'bg-green-100',
                            iconColor: 'text-green-600'
                        }
                    ],
                    recentVouchers: [
                        {
                            id: 1,
                            title: '销售收入',
                            date: '2024-01-15',
                            amount: '¥50,000.00',
                            type: '收入'
                        },
                        {
                            id: 2,
                            title: '办公用品采购',
                            date: '2024-01-14',
                            amount: '¥2,500.00',
                            type: '支出'
                        },
                        {
                            id: 3,
                            title: '员工工资',
                            date: '2024-01-13',
                            amount: '¥35,000.00',
                            type: '支出'
                        }
                    ]
                }
            }
        }).mount('#app');
    </script>
</body>
</html>